元件中資料與事件的傳遞

• $emit 方法在傳遞事件時也可以傳遞一些參數，很多自定義元件都有狀態，這時就可以將狀態作為參數進行傳遞。範例程式如下：

<div id="Application">
  <my-alert @myclick="appFunc" title="按鈕1"></my-alert>
  <my-alert @myclick="appFunc" title="按鈕2"></my-alert>
</div>
<script>
    const App = Vue.createApp({
        methods:{
            appFunc(param){
                console.log('點擊了自定義元件-'+param)
            }
        }
    })
    const alertComponent = {
        props:["title"],
        template:'<div><button @click="$emit(\'myclick\',title)">{{title}}</button></div>'
    }
    App.component("my-alert",alertComponent)
    App.mount("#Application")
</script>

• 執行程式，當點擊按鈕時，其會在主控台列印出當前按鈕的標題，這個標題資料就是子元件傳遞事件時帶給父元件的事件參數。